<template>
    <m-water-fall :datas="products">
        <template v-slot:header="{ data: product }">
            <image class="m-product-img" :src="product.imageUrl" mode="scaleToFill" />
        </template>
        <template v-slot:body="{ data: product }">
            <view class="m-product-content-title">{{ product.title }}</view>
            <view class="m-product-content-sub-title">{{ product.subTitle }}</view>
            <view class="m-product-content-tags">
                <uni-tag
                    v-for="item in product.tags"
                    :inverted="true"
                    :text="item"
                    type="success"
                    size="small"
                    custom-style=" margin: 8rpx 4rpx;
    word-break: keep-all;"
                />
            </view>
        </template>
        <template v-slot:footer="{ data: product }">
            <view class="m-product-content-price">{{ product.price }}</view>
        </template>
    </m-water-fall>
</template>

<script lang="ts" setup>
import MWaterFall from '@/components/common/MWaterFall.vue'
const props = defineProps({
    products: { type: Array<Product>, default: [] }
})
</script>

<style lang="scss" scoped>
@import '~@/static/css/m-product.scss';
</style>
